<template>
  <div class="store-audit">
    <el-card>
      <div style="margin-bottom: 20px">
        <el-button
          type="warning"
          plain
          class="header"
          size="small"
          @click="$router.back()"
        ><i class="el-icon-back" /> 返回</el-button>
        <el-tag type="warning" class="header">{{ tagText }}</el-tag>
      </div>

      <el-form :model="formData" label-width="120px">
        <el-row type="flex">
          <el-col>
            <el-form-item label="店铺头像">
              <el-image
                class="img"
                :src="formData.storeAvatar"
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="店铺实拍">
              <el-image
                v-for="(item, index) in formData.storeImags.slice(0, 2)"
                :key="index"
                class="img"
                :src="item"
                :preview-src-list="formData.storeImags"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col>
            <el-form-item label="主要产品图">
              <el-image
                v-for="(item, index) in formData.mainProdsImgs.slice(0, 2)"
                :key="index"
                class="img"
                :src="item"
                :preview-src-list="formData.mainProdsImgs"
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="营业证件">
              <el-image
                v-for="(item, index) in formData.businessLicenseImgs.slice(0, 2)"
                :key="index"
                class="img"
                :src="item"
                :preview-src-list="formData.businessLicenseImgs"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="店铺名称">
          <el-input v-model="formData.storeName" disabled />
        </el-form-item>
        <el-form-item label="店铺分店名称">
          <el-input v-model="formData.subStoreName" disabled />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="formData.IDcard" disabled />
        </el-form-item>
        <el-form-item label="身份证照">
          <el-image
            v-for="(item, index) in srcList"
            :key="index"
            class="img"
            :src="item"
            :preview-src-list="srcList"
          />
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="formData.storePhone" disabled />
        </el-form-item>
        <el-form-item label="邀请码">
          <el-input v-model="formData.invitationCode" disabled />
        </el-form-item>
        <el-form-item label="发货方式" class="delivery">
          <el-row>
            <el-checkbox
              v-model="formData.selfPickUp"
              label="到店自提"
              disabled
            />
          </el-row>
          <el-row>
            <el-checkbox
              v-model="formData.citySend.status"
              label="同城配送"
              disabled
            />
          </el-row>
          <el-row v-if="formData.citySend.status">
            <span>起配价<i>{{ formData.citySend.spendSend }}</i>元</span>
            <span>配送费<i>{{ formData.citySend.delivery }}</i>元</span>
            <span>配送时间
              <i class="timer">{{ formData.citySend.deliveryTimeStart }}</i>至<i class="timer">{{ formData.citySend.deliveryTimeEnd }}</i>
            </span>
          </el-row>
          <el-row>
            <el-checkbox
              v-model="formData.regionalization.status"
              label="区域配送"
              disabled
            />
            <el-row v-if="formData.regionalization.status">
              <span>起配价<i>{{ formData.regionalization.spendSend }}</i>元</span>
              <span>配送范围<i>{{ formData.regionalization.range }}</i>公里（以内）</span>
              <span>配送费<i>{{ formData.regionalization.delivery }}</i>元</span>
              <span>配送时间
                <i class="timer">{{
                  formData.regionalization.deliveryTimeStart
                }}</i>至<i class="timer">{{
                  formData.regionalization.deliveryTimeEnd
                }}</i>
              </span>
            </el-row>
          </el-row>
          <el-row>
            <el-checkbox
              v-model="formData.crossSend.status"
              label="跨城配送"
              disabled
            />
            <el-row v-if="formData.crossSend.status">
              <span>配送费<i>{{ formData.crossSend.delivery }}</i>元</span>
            </el-row>
          </el-row>
        </el-form-item>
        <el-form-item label="审核备注">
          <el-input
            v-model="formData.remarkOfAudit"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            :disabled="disable"
          />
        </el-form-item>
      </el-form>
      <el-row type="flex" slot:footer justify="center">
        <el-col :span="6">
          <el-button
            size="small"
            type=""
            :disabled="disable"
            @click="unApprove"
          >审核不通过</el-button>
          <el-button
            size="small"
            type="primary"
            :disabled="disable"
            @click="approve"
          >审核通过</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {
  getStoreById,
  getStoreDeliveryById,
  getStoreDetailsById,
  approveStore
} from '@/api/storeserin'

export default {
  name: 'StoreAudit',
  components: {},
  props: {
    storeId: {
      type: [String, Number, Object],
      required: true
    }
  },
  data() {
    return {
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      formData: {
        // 绑定全部数据
        crossSend: {},
        regionalization: {},
        citySend: {},
        storeImags: [],
        mainProdsImgs: [],
        businessLicenseImgs: []
      },
      auditData: {
        // 用来纪律审核通过时的数据提交
      }
    }
  },
  computed: {
    tagText: {
      get(val) {
        if (this.formData.statusOfAudit === '不通过') {
          return '审核失败'
        } else if (this.formData.statusOfAudit === '通过') {
          return '审核完成'
        } else {
          return '审核中'
        }
      },
      set(val) {}
    },
    disable() {
      return this.formData.statusOfAudit === '通过' || this.formData.statusOfAudit === '不通过'
    }
  },
  watch: {},
  created() {
    this.getInfo()
  },
  mounted() {},
  methods: {
    async getInfo() {
      const res1 = await getStoreById(this.storeId)
      const res2 = await getStoreDeliveryById(this.storeId)
      const res3 = await getStoreDetailsById(this.storeId)
      this.formData = { ...res1[0], ...res2[0], ...res3[0] }
      this.auditData = res1[0]
      this.tagText = res1.statusOfAudit
      this.srcList = [res3[0].IDcardImageBefore, res3[0].IDcardImageAfter]
    },
    // 审核通过
    async approve() {
      try {
        await this.$confirm('要通过此店铺的审核吗？')
        await approveStore({
          ...this.auditData,
          remarkOfAudit: this.formData.remarkOfAudit,
          statusOfAudit: '通过'
        })
        this.getInfo()
        this.$message.success('店铺审核通过')
      } catch (error) {
        console.log(error)
      }
    },
    // 审核不通过
    async unApprove() {
      try {
        await approveStore({
          ...this.auditData,
          remarkOfAudit: this.formData.remarkOfAudit,
          statusOfAudit: '不通过'
        })
        this.getInfo()
        this.$message.success('店铺暂未通过审核')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/storeerin';
.store-audit {
  .header {
    margin-right: 20px;
  }
  .el-input,
  .el-textarea {
    width: 50%;
  }
  .delivery {
    span {
      padding-left: 40px;
      i {
        display: inline-block;
        margin: 0 3px;
        width: 25px;
        font-style: normal;
        background-color: #f5f7fa;
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        color: #c0c4cc;
        cursor: not-allowed;
        line-height: 30px;
      }
      .timer {
        width: 70px;
      }
    }
  }
  .img {
    width: 80px;
    height: 80px;
    margin-right: 10px;
    border-radius: 10px;
  }
}
</style>
